<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一曲倾情 - 电影详情</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            margin: 0;
            padding: 0;
            color: #ffffff;
            line-height: 1.6;
            background-color: #1a1a1a;
        }
        .nav {
            display: flex;
            justify-content: space-around;
            padding: 15px 0;
            background-color: #000000;
            border-bottom: 1px solid #333333;
            position: relative;
        }
        .nav a {
            color: #ffffff;
            text-decoration: none;
            font-size: 16px;
        }
        .auth {
            position: absolute;
            right: 20px;
            top: 15px;
            font-size: 14px;
        }
        .auth a {
            color: #ffffff;
        }
        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 30px;
            background-color: #242424;
            box-shadow: 0 1px 3px rgba(255, 255, 255, 0.1);
            border: 1px solid #333333;
        }
        .movie-title {
            display: flex;
            align-items: center;
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 25px;
            padding-bottom: 15px;
            border-bottom: 1px solid #333333;
            color: #ffffff;
        }
        .movie-title img {
            width: 200px;
            height: auto;
            margin-left: 20px;
            border-radius: 4px;
        }
        .movie-info {
            margin-bottom: 30px;
            font-size: 15px;
            line-height: 1.8;
            color: #ffffff;
        }
        .movie-details {
            margin-top: 40px;
        }
        .detail-item {
            margin-bottom: 12px;
            font-size: 14px;
            color: #ffffff;
        }
        .detail-label {
            font-weight: bold;
            display: inline-block;
            width: 60px;
            color: #cccccc;
        }
        .divider {
            border-top: 1px solid #333333;
            margin: 30px 0;
        }
        .footer {
            text-align: center;
            margin-top: 40px;
            color: #999999;
            font-size: 13px;
            padding: 20px 0;
        }
        .quote {
            margin: 25px 0;
            padding-left: 20px;
            border-left: 3px solid #333333;
            color: #ffffff;
        }
        .eng-quote {
            font-family: Arial, sans-serif;
            margin: 10px 0;
            color: #cccccc;
            font-style: italic;
        }
        .song-title {
            text-align: center;
            margin: 25px 0;
            font-weight: bold;
            font-size: 18px;
            letter-spacing: 1px;
            color: #ffffff;
        }
        h3 {
            font-size: 18px;
            margin-bottom: 20px;
            color: #ffffff;
        }
        .submit-btn {
            display: block;
            margin: 30px auto;
            padding: 12px 30px;
            background-color: #ff0000;
            color: white;
            border: none;
            border-radius: 4px;
            font-size: 16px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .submit-btn:hover {
            background-color: #cc0000;
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.7);
        }
        .modal-content {
            background-color: #333;
            margin: 15% auto;
            padding: 30px;
            border: 1px solid #666;
            width: 300px;
            text-align: center;
            border-radius: 5px;
        }
        .modal-btn {
            margin-top: 20px;
            padding: 8px 20px;
            background-color: #ff0000;
            color: rgb(255, 255, 255);
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="首页.html">首页</a>
        <a href="电影.html">电影</a>
        <a href="电视剧.html">电视剧</a>
        <a href="电影院.html">电影院</a>
        <div class="auth">
            <a href="登录.html">登录</a> | <a href="注册.html">注册</a>
        </div>
    </div>

    <div class="container">
        <h1 class="movie-title"><img src="图片\一曲.png" alt="一曲倾情电影海报"/>  《一曲倾情》</h1>
        
        <div class="movie-info">
            <p>安妮·海瑟薇饰演的年轻女子因为弟弟的意外而回到纽约但没能跟随他的责任。不料却和弟弟最喜欢的音乐人之间发展出一段情缘。本片集合了爱情、音乐等年轻人喜闻乐见的元素，是一部偏文艺向的爱情片。</p>
            
            <div class="song-title">
                SUNG ONE
            </div>
            
            <div class="detail-item">
                <span class="detail-label">地区:</span> 美国
            </div>
            <div class="detail-item">
                <span class="detail-label">导演:</span> Kate Barker-Froyland
            </div>
            <div class="detail-item">
                <span class="detail-label">主演:</span> 安妮海瑟薇 / 玛丽娜/ 阿丽娜 / 爱莎/ 大卫
            </div>
            <div class="detail-item">
                <span class="detail-label">出版时间:</span> 2014-1-20
            </div>
            <div class="detail-item">
                <span class="detail-label">稿件号:</span> 7-8-2025
            </div>
        </div>
        
        <div class="divider"></div>
        
        <div class="movie-details">
            <h3>详细</h3>
            <p>"跟着安妮公主听小梅歌"系列，单歌曲编辑排上Song One很难与One和Begin Again相比，但好在歌曲都是够清新动听，饰演男主角的强尼·弗林自弹自唱，眼睛和歌词里满满都是一个有经历的人的故事。这样的一部爱情轻柔小调，尤为适合在夜深人静的时候就着耳机慢慢看完听完。</p>
            
            <p>电影能够打动我心的我就喜欢，就认为是好看的电影，外行也就是外行的看点和喜欢。无意中看到了这部电影，故事简单的不能再简单了，弟弟非常留迷不醒，前景堪忧。姐姐在照顾弟弟时看到了弟弟的日记，日记里记录了他喜欢的歌手，喜欢去听音乐的场所，曾住过的地方，喜欢的乐曲等。</p>
            
            <div class="quote">
                <p>他是有点着迷</p>
                <p class="eng-quote">it was easy!</p>
            </div>
            <button class="submit-btn" id="submitOrder">提交订单</button>
        </div>
    </div>
    
    <div class="footer">
        电影 · 唐
    </div>

    <!-- 弹窗 -->
    <div id="successModal" class="modal">
        <div class="modal-content">
            <h3>订票成功</h3>
            <p>您的电影票已成功预订！</p>
            <button class="modal-btn" id="confirmBtn"><a href="首页.html">好的</a></button>
        </div>
    </div>

    <script>
        // 获取按钮和弹窗元素
        const submitBtn = document.getElementById('submitOrder');
        const modal = document.getElementById('successModal');
        const confirmBtn = document.getElementById('confirmBtn');
        
        // 点击提交订单按钮显示弹窗
        submitBtn.addEventListener('click', function() {
            modal.style.display = 'block';
        });
        
        // 点击好的按钮关闭弹窗
        confirmBtn.addEventListener('click', function() {
            modal.style.display = 'none';
        });
        
        // 点击弹窗外部也关闭弹窗
        window.addEventListener('click', function(event) {
            if (event.target === modal) {
                modal.style.display = 'none';
            }
        });
    </script>
</body>
</html>